<template>
    <div class="home">
        <!-- html  -->
        <button>这是一个很好看的按钮</button>
        <el-button type="success" @click="add">添加按钮</el-button>
        <!-- 禁用按钮 -->
        <el-button type="warning" disabled>删除</el-button>
        <!-- 一个搜索框，输入的时候fetch-suggestions显示搜索建议 -->
        <el-input placeholder="请输入内容" v-model="input" clearable :fetch-suggestions="querySearch">
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <!-- 点击按钮 然后在中间提示输入的内容 -->
        <el-button type="primary" @click="handleClick">点击</el-button>
       
    </div>
</template>

<script>

// js 
export default {
    name: 'Home',
    methods: {
        add(){
            // 两秒钟后自动关闭

            this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
            });
           
        }
    },
    data(){
        return {
            msg: '这是首页',
            input:''
        }
    },
    methods:{
        handleClick(){
            this.$alert(this.input, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                        type: 'info',
                        message: `action: ${action}`
                    });
                }
            });
        },
    }
    
    
}
</script>

<style>
/* css  */
.home{
    width: 100%;
    height: 60px;
    /* 浓一点阴影 */
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    background-color: rgba(0,0,0,.1);
    border-radius: 5px;
}
</style>